<template>
	<view class="popup-wrapper">
		<view class="mask" @tap="handleClose"></view>
		<view class="popup-content">
			<!-- 顶部商品信息 -->
			<view class="product-header">
				<view class="close-btn" @tap="handleClose">
					<u-icon name="close" color="#333" size="32"></u-icon>
				</view>
				<view class="product-main">
					<image class="product-image" :src="product.image" mode="aspectFill" />
					<view class="product-info">
						<text class="name">{{product.name}}</text>
						<text class="desc">{{product.description || '暂无描述'}}</text>
						<view class="price">
							<text class="symbol">¥</text>
							<text class="value">{{product.price}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 规格选择区域 -->
			<scroll-view class="specs-content" scroll-y>
				<!-- 温度选择 -->
				<view class="spec-block">
					<text class="block-title">温度选择</text>
					<view class="spec-options">
						<view 
							v-for="(temp, index) in tempOptions" 
							:key="index"
							:class="['spec-option', selectedTemp === temp.value ? 'active' : '']"
							@tap="selectTemp(temp.value)"
						>
							<text>{{temp.label}}</text>
						</view>
					</view>
				</view>

				<!-- 糖度选择 -->
				<view class="spec-block">
					<text class="block-title">糖度选择</text>
					<view class="spec-options">
						<view 
							v-for="(sugar, index) in sugarOptions" 
							:key="index"
							:class="['spec-option', selectedSugar === sugar.value ? 'active' : '']"
							@tap="selectSugar(sugar.value)"
						>
							<text>{{sugar.label}}</text>
						</view>
					</view>
				</view>

				<!-- 数量选择 -->
				<view class="spec-block">
					<view class="quantity-header">
						<text class="block-title">数量选择</text>
						<view class="quantity-control">
							<view class="control-btn" :class="{disabled: count <= 1}" @tap="decreaseCount">
								<u-icon name="minus" :color="count > 1 ? '#333' : '#ccc'" size="24"></u-icon>
							</view>
							<text class="count">{{count}}</text>
							<view class="control-btn plus" @tap="increaseCount">
								<u-icon name="plus" color="#fff" size="24"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 底部操作栏 -->
			<view class="bottom-bar">
				<view class="price-section">
					<text class="label">总计</text>
					<view class="total">
						<text class="symbol">¥</text>
						<text class="value">{{totalPrice}}</text>
					</view>
				</view>
				<view class="action-btn" @tap="addToCart">
					<text>加入购物车</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'MenuOpen',
	props: {
		product: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			count: 1,
			selectedTemp: '正常冰',
			selectedSugar: '7分糖',
			tempOptions: [
				{ label: '正常冰', value: '正常冰' },
				{ label: '少冰', value: '少冰' },
				{ label: '去冰', value: '去冰' },
				{ label: '常温', value: '常温' },
				{ label: '热', value: '热' }
			],
			sugarOptions: [
				{ label: '7分糖', value: '7分糖' },
				{ label: '5分糖', value: '5分糖' },
				{ label: '3分糖', value: '3分糖' },
				{ label: '不另外加糖', value: '不另外加糖' }
			],
			showAnimation: false,
			showToast: false,
			animationStyle: {
				left: '0px',
				top: '0px'
			}
		}
	},
	computed: {
		productImage() {
			return this.product.image
		},
		productName() {
			return this.product.name
		},
		productDesc() {
			return this.product.desc || '暂无描述'
		},
		cupSize() {
			return this.product.spec
		},
		price() {
			return this.product.price
		},
		totalPrice() {
			return (this.product.price * this.count).toFixed(2)
		}
	},
	methods: {
		handleClose() {
			this.$emit('close')
		},
		increaseCount() {
			this.count++
		},
		decreaseCount() {
			if (this.count > 1) {
				this.count--
			}
		},
		selectTemp(value) {
			this.selectedTemp = value
		},
		selectSugar(value) {
			this.selectedSugar = value
		},
		handleShare() {
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			})
		},
		addToCart() {
			const cartItem = {
				...this.product,
				temp: this.selectedTemp,
				sugar: this.selectedSugar,
				count: this.count,
				totalPrice: this.product.price * this.count,
				specs: `${this.selectedTemp}，${this.selectedSugar}`,
				specSelected: true
			}
			
			// 触发添加购物车事件
			this.$emit('add-to-cart', cartItem)
			
			// 显示添加成功动画
			this.showAddAnimation()
			
			// 关闭规格选择弹窗
			setTimeout(() => {
				this.handleClose()
			}, 500)
		},
		showAddAnimation() {
			// 直接触发添加成功提示
			uni.showToast({
				title: '已加入购物车',
				icon: 'success'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.popup-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	
	.mask {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
	}
	
	.popup-content {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
		max-height: 90vh;
		overflow: hidden;
		
		.product-header {
			padding: 40rpx;
			position: relative;
			background: #fff;
			
			.close-btn {
				position: absolute;
				top: 40rpx;
				right: 40rpx;
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1;
			}
			
			.product-main {
				display: flex;
				padding-right: 40rpx;
				
				.product-image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					margin-right: 24rpx;
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
				}
				
				.product-info {
					flex: 1;
					min-width: 0;
					display: flex;
					flex-direction: column;
					
					.name {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 12rpx;
						line-height: 1.4;
					}
					
					.desc {
						font-size: 24rpx;
						color: #999;
						line-height: 1.4;
						margin-bottom: 20rpx;
					}
					
					.price {
						margin-top: auto;
						
						.symbol {
							font-size: 28rpx;
							color: #8cd548;
						}
						
						.value {
							font-size: 40rpx;
							color: #8cd548;
							font-weight: bold;
						}
					}
				}
			}
		}
		
		.specs-content {
			max-height: calc(90vh - 400rpx);
			padding: 0 40rpx 40rpx;
			
			.spec-block {
				margin-bottom: 30rpx;
				
				.block-title {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				
				.spec-options {
					display: flex;
					flex-wrap: wrap;
					gap: 16rpx;
					
					.spec-option {
						padding: 12rpx 28rpx;
						background: #f8f8f8;
						border-radius: 100rpx;
						transition: all 0.3s;
						
						text {
							font-size: 26rpx;
							color: #666;
						}
						
						&.active {
							background: #8cd548;
							
							text {
								color: #fff;
							}
						}
					}
				}
				
				.quantity-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
					
					.quantity-control {
						display: flex;
						align-items: center;
						background: #f8f8f8;
						border-radius: 100rpx;
						padding: 4rpx 8rpx;
						margin-right: 40rpx;
						position: relative;
						right: 40rpx;
						
						.control-btn {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							
							&.disabled {
								 opacity: 0.5;
							 }
							 
							 &.plus {
								 background: #8cd548;
							 }
						}
						
						.count {
							min-width: 60rpx;
							padding: 0 10rpx;
							text-align: center;
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
						}
					}
				}
			}
		}
		
		.bottom-bar {
			padding: 30rpx 40rpx;
			border-top: 1rpx solid #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			
			.price-section {
				.label {
					font-size: 26rpx;
					color: #999;
					margin-right: 12rpx;
				}
				
				.total {
					.symbol {
						font-size: 28rpx;
						color: #8cd548;
						margin-right: 4rpx;
					}
					
					.value {
						font-size: 40rpx;
						color: #8cd548;
						font-weight: bold;
					}
				}
			}
			
			.action-btn {
				padding: 0 60rpx;
				height: 80rpx;
				background: linear-gradient(135deg, #8cd548 0%, #6ab52e 100%);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 8rpx 24rpx rgba(140, 213, 72, 0.3);
				
				text {
					font-size: 30rpx;
					color: #fff;
					font-weight: 500;
				}
				
				&:active {
					transform: scale(0.98);
				}
			}
		}
	}
}

.add-cart-animation {
	display: none;
}

.custom-toast {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 10000;
	pointer-events: none;
	animation: fadeInOut 0.3s ease-in-out;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 20rpx 40rpx;
	border-radius: 8rpx;
	
	text {
		color: #fff;
		font-size: 28rpx;
	}
}

@keyframes fadeInOut {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.8);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}
</style> 